<template>
  <!-- 行业管理 -- 行业分类 -- 新增/编辑 -->
  <div>
    <public-modal
      :footer="false"
      :publicVisible="publicVisible"
      :title="title"
      modalStyle="detailModal"
      width="600px"
      @cancel="cancel"
      @handleOk="handleOk"
    >
      <div slot="content">
        <a-form :form="form" autocomplete="off" class="formStyle" layout="inline">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="行业名称">
                <a-input
                  v-decorator="[
                    'informationName',
                    {
                      rules: [{ required: true, message: '请填写行业名称!' }],
                    },
                  ]"
                  :maxLength="30"
                  auto-size
                  placeholder="请填写"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="排序值">
                <a-input-number
                  v-decorator="[
                    'informationOrder',
                    {
                      rules: [{ required: true, message: '请填写排序值!' }],
                    },
                  ]"
                  :maxLength="30"
                  :min="1"
                  auto-size
                  placeholder="请填写"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <div class="imageUpload">
              <a-col :span="13">
                <a-form-item label="uniAppicon">
                  <a-upload
                    :customRequest="(e) => customRequest(e, 'uni')"
                    :file-list="iconFileList"
                    :remove="(e) => remove(e, 'uni')"
                    :showUploadList="showUploadList"
                    accept="image/png, image/JPG,image/jpeg"
                    class="avatar-uploader"
                    list-type="picture-card"
                    @change="(e) => uploadChange(e, 'uni')"
                  >
                    <div v-if="iconFileList.length < 1">
                      <img alt="" class="pictIcon" src="@/assets/imgs/pict-icon.png" />
                      <p class="imgText">点击上传</p>
                    </div>
                  </a-upload>
                </a-form-item>
              </a-col>
              <a-col :span="11" class="notice">
                <p>注意事项：</p>
                <p>大小保持在200KB以内。</p>
              </a-col>
            </div>
          </a-row>

          <a-row :gutter="24" style="margin-top: 25px">
            <div class="imageUpload">
              <a-col :span="13">
                <a-form-item label="appIcon">
                  <a-upload
                    :customRequest="(e) => customRequest(e, 'app')"
                    :file-list="appFileList"
                    :remove="(e) => remove(e, 'app')"
                    :showUploadList="showUploadList"
                    accept="image/png, image/JPG,image/jpeg"
                    class="avatar-uploader"
                    list-type="picture-card"
                    @change="(e) => uploadChange(e, 'app')"
                  >
                    <div v-if="appFileList.length < 1">
                      <img alt="" class="pictIcon" src="@/assets/imgs/pict-icon.png" />
                      <p class="imgText">点击上传</p>
                    </div>
                  </a-upload>
                </a-form-item>
              </a-col>
              <a-col :span="11" class="notice">
                <p>注意事项：</p>
                <p>大小保持在200KB以内。</p>
              </a-col>
            </div>
          </a-row>

          <a-row :gutter="24" style="margin-top: 25px">
            <div class="imageUpload">
              <a-col :span="13">
                <a-form-item label="webIcon">
                  <a-upload
                    :customRequest="(e) => customRequest(e, 'web')"
                    :file-list="webFileList"
                    :remove="(e) => remove(e, 'web')"
                    :showUploadList="showUploadList"
                    accept="image/png, image/JPG,image/jpeg"
                    class="avatar-uploader"
                    list-type="picture-card"
                    @change="(e) => uploadChange(e, 'web')"
                  >
                    <div v-if="webFileList.length < 1">
                      <img alt="" class="pictIcon" src="@/assets/imgs/pict-icon.png" />
                      <p class="imgText">点击上传</p>
                    </div>
                  </a-upload>
                </a-form-item>
              </a-col>
              <a-col :span="11" class="notice">
                <p>注意事项：</p>
                <p>大小保持在200KB以内。</p>
              </a-col>
            </div>
          </a-row>

          <a-row :gutter="24" style="margin-top: 25px">
            <div class="imageUpload">
              <a-col :span="13">
                <a-form-item label="webClick">
                  <a-upload
                    :customRequest="(e) => customRequest(e, 'webClick')"
                    :file-list="webClickFileList"
                    :remove="(e) => remove(e, 'webClick')"
                    :showUploadList="showUploadList"
                    accept="image/png, image/JPG,image/jpeg"
                    class="avatar-uploader"
                    list-type="picture-card"
                    @change="(e) => uploadChange(e, 'webClick')"
                  >
                    <div v-if="webClickFileList.length < 1">
                      <img alt="" class="pictIcon" src="@/assets/imgs/pict-icon.png" />
                      <p class="imgText">点击上传</p>
                    </div>
                  </a-upload>
                </a-form-item>
              </a-col>
              <a-col :span="11" class="notice">
                <p>注意事项：</p>
                <p>大小保持在200KB以内。</p>
              </a-col>
            </div>
          </a-row>
        </a-form>
      </div>
    </public-modal>
  </div>
</template>

<script>
import { informationAdd, informationEdit } from '@/api/industry'
import { uploadFile } from '@/api/api'
import { commitTrim } from '@/utils/util'
import publicModal from '@/components/publicModal'

export default {
  components: { publicModal },
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      form: this.$form.createForm(this),
      records: {},
      publicVisible: false,
      showUploadList: {
        showPreviewIcon: false,
      },
      iconUrl: '',
      iconFileList: [],
      appIconUrl: '',
      appFileList: [],
      webHomeUrl: '',
      webFileList: [],
      webHomeClickUrl: '',
      webClickFileList: [],
    }
  },
  mounted() {},
  methods: {
    show(records) {
      this.records = records
      this.publicVisible = true

      if (records && records.id) {
        this.$nextTick(() => {
          this.form.setFieldsValue({ ...records })
          // console.log(records, 'records')
          this.iconUrl = records.iconUrl
          this.appIconUrl = records.appIconUrl
          this.webHomeUrl = records.webHomeUrl
          this.webHomeClickUrl = records.webHomeClickUrl

          this.pushFile(
            { name: records.iconUrl, imgPrefix: records.imgPrefix, url: records.iconUrl },
            this.iconFileList
          )
          this.pushFile(
            { name: records.appIconUrl, imgPrefix: records.imgPrefix, url: records.appIconUrl },
            this.appFileList
          )
          this.pushFile(
            { name: records.webHomeUrl, imgPrefix: records.imgPrefix, url: records.webHomeUrl },
            this.webFileList
          )
          this.pushFile(
            { name: records.webHomeClickUrl, imgPrefix: records.imgPrefix, url: records.webHomeClickUrl },
            this.webClickFileList
          )
          // let imageUrl = records.iconUrl == '' ? [] : records.iconUrl.split(',')
          // if (imageUrl.length) {
          //   for (let i = 0; i < imageUrl.length; i++) {
          //     let obj1 = {
          //       uid: i,
          //       name: imageUrl[i],
          //       status: 'done',
          //       url: records.imgPrefix + imageUrl[i],
          //     }
          //     this.fileList.push(obj1)

          //     this.imageUrl.push(imageUrl[i])
          //   }
          // }
        })
      }
    },

    pushFile(obj, fileList) {
      const fileObj = { uid: 1, name: obj.name, status: 'done', url: obj.imgPrefix + obj.url }
      fileList.push(fileObj)
    },

    remove(file, type) {
      if (type == 'uni') {
        this.iconUrl = ''
        this.iconFileList = []
      } else if (type == 'app') {
        this.appIconUrl = ''
        this.appFileList = []
      } else if (type == 'web') {
        this.webHomeUrl = ''
        this.webFileList = []
      } else if (type == 'webClick') {
        this.webHomeClickUrl = ''
        this.webClickFileList = []
      }
      // let uid = file.uid
      // let index = this.fileList.findIndex((v) => {
      //   return v.uid == uid
      // })
      // this.fileList.splice(index, 1)
      // this.imageUrl.splice(index, 1)
    },

    // { file, fileList }
    uploadChange(e, type) {
      let { file, fileList } = e
      if (this.isLt2M) {
        file.status = 'done'
        if (type == 'uni') {
          this.iconFileList = fileList
        } else if (type == 'app') {
          this.appFileList = fileList
        } else if (type == 'web') {
          this.webFileList = fileList
        } else if (type == 'webClick') {
          this.webClickFileList = fileList
        }
      }
    },

    async customRequest(info, type) {
      // console.log(info, type, 'customRequest')
      const isJpgOrPng =
        info.file.type === 'image/jpeg' || info.file.type === 'image/png' || info.file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpg，png，jpeg格式图片!')
        return
      }

      this.isLt2M = info.file.size / 1024 / 1024 < 2
      if (!this.isLt2M) {
        this.$message.warn('请上传小于200KB的照片!')
      }

      if (isJpgOrPng && this.isLt2M) {
        let file = info.file
        const formData = new FormData()
        formData.append('file', file)
        formData.append('type', 5)
        let res = await uploadFile(formData)
        if (res.code == 200) {
          // this.imageUrl.push(res.result.halfPath)
          if (type == 'uni') {
            this.iconUrl = res.result.halfPath
          } else if (type == 'app') {
            this.appIconUrl = res.result.halfPath
          } else if (type == 'web') {
            this.webHomeUrl = res.result.halfPath
          } else if (type == 'webClick') {
            this.webHomeClickUrl = res.result.halfPath
          }
        }
      }
    },

    handleOk() {
      this.form.validateFields((err, values) => {
        if (err != null) {
          return
        }

        if (!this.iconUrl.length) {
          this.$message.warn('请上传小程序icon')
          return
        }

        if (!this.appIconUrl.length) {
          this.$message.warn('请上传APPicon')
          return
        }

        if (!this.webHomeUrl.length) {
          this.$message.warn('请上传Webicon')
          return
        }

        if (!this.webHomeClickUrl.length) {
          this.$message.warn('请上传WebClickicon')
          return
        }

        commitTrim(values)
        let data = {
          iconUrl: this.iconUrl,
          appIconUrl: this.appIconUrl,
          webHomeUrl: this.webHomeUrl,
          webHomeClickUrl: this.webHomeClickUrl,
          ...values,
        }

        if (!this.records) {
          informationAdd(data).then((res) => {
            this.$message.success(res.message)
            this.cancel()
            this.$emit('refresh')
          })
        } else {
          informationEdit({ id: this.records.id, ...data }).then((res) => {
            this.$message.success(res.message)
            this.cancel()
            this.$emit('refresh')
          })
        }
      })
    },

    cancel() {
      this.publicVisible = false
      this.iconFileList = []
      this.appFileList = []
      this.webFileList = []
      this.webClickFileList = []
    },
  },
}
</script>

<style lang="less" scoped>
.imageUpload {
  margin-bottom: 150px;
  /deep/.avatar-uploader {
    > .ant-upload {
      width: 160px;
      height: 160px;
      background: var(--theme-container-bg);
      border: 1px solid var(--theme-input-border);
    }
  }

  /deep/.ant-upload-select-picture-card {
    width: 160px;
    height: 160px;
  }

  /deep/ .ant-upload-list-item {
    width: 160px;
    height: 160px;
  }

  .imgText {
    color: #1163b8;
    font-weight: 500;
  }

  .pictIcon {
    margin-bottom: 10px;
    width: 42px;
    height: 38px;
  }

  .notice {
    padding-left: 0;
    padding-top: 15px;
    color: #1163b8;
    font-weight: 500;
  }
}
</style>
